<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite"	>

<cc:interface >
	<cc:attribute name="videosHandler"	type="com.hemerasolutions.v2trainer.component.interfaces.list.VideosListCompInterface" required="true"/>
	<cc:attribute name="editable"		type="java.lang.Boolean" default="true" />
</cc:interface>
	
<cc:implementation>

	<span id="#{cc.clientId}" >
		<p:outputPanel id="videoListPanel" style="padding-left:0px;" >
			<h:form id="videoForm" prependId="false">
				<p:remoteCommand name="rcUploadYT_#{cc.id}" actionListener="#{cc.attrs.videosHandler.uploadToYouTube}" update=":growl, @parent" 
					onstart="wprogressDialog_#{cc.id}.show();pbAjax_#{cc.id}.start();"  
					oncomplete="pbAjax_#{cc.id}.cancel();wprogressDialog_#{cc.id}.hide();" />		
				<p:carousel  value="#{cc.attrs.videosHandler.videos}" var="video" widgetVar="wcarouselVideo_#{cc.id}" numVisible="1" 
					itemStyle="height:250px;width:650px;" headerText="#{msgs.ExerciseVideos}"  >
					<div align="center" style="height:240px;width:600px;">
						<h:panelGrid columns="2" cellspacing="2" cellpadding="2">
							<h:column  >
								<p:outputPanel layout="block" style="width:320px;height:240px;display: table-cell;text-align: center;vertical-align: middle"
									rendered="#{video.remoteVideo.storageId != null }">
									<div class="youtube" title="#{video.remoteVideo.storageId}" style="width: 320px; height: 240px;"/>
									<h:outputScript library="js" name="youtube.js" />	
								</p:outputPanel>
							</h:column>				
							<h:column >
								<div style="width:320px;height:230px;display: table-cell;vertical-align: middle">
									<div style="height:210px;display: table-cell;vertical-align: middle;text-align:left;">
										<h:outputText value="#{msgs.Description} :" style="text-align:left"/>
										<br/>	
										<p:inputTextarea rows="4" cols="45"	maxlength="180" label="#{msgs.DescriptionOfPictureContent}"
											value="#{video.description}" disabled="#{!cc.attrs.editable}" />
										<br/>
										<h:selectBooleanCheckbox value="#{video.principal}" disabled="#{!cc.attrs.editable}"/>	
										<p:outputLabel value="#{msgs.MainVideo}" />
											
									</div>
									<div style="width:320px">
										<p:commandButton title="#{msgs.Upload}" update=":#{cc.clientId}:dlgupload" oncomplete="wdlgupload_#{cc.id}.show();" process="@this"
											styleClass="ui-button-icon-only"	icon="ui-icon-arrowthickstop-1-s" style="width:15px;height:15px;padding:0px;margin:0px" 
											disabled="#{!cc.attrs.editable}">
											<f:setPropertyActionListener target="#{cc.attrs.videosHandler.selVideo}" value="#{video}"/>
										</p:commandButton>  

										<p:commandButton action="#{cc.attrs.videosHandler.addVideo}" update=":#{cc.clientId}:videoListPanel" oncomplete="wcarouselVideo_#{cc.id}.setPage(#{fn:length(cc.attrs.videosHandler.videos) + 1})"
											styleClass="ui-button-icon-only"	icon="ui-icon-document" style="width:15px;height:15px;padding:0px;margin:0px" disabled="#{!cc.attrs.editable}"/>  
										
										<p:commandButton  styleClass="ui-button-icon-only" action="#{cc.attrs.videosHandler.deleteVideo}"  update=":#{cc.clientId}:videoListPanel"
								               icon="ui-icon-trash" style="width:15px;height:15px;padding:0px;margin:0px" disabled="#{fn:length(cc.attrs.videosHandler.videos) le 1 or not cc.attrs.editable}">
											<f:setPropertyActionListener target="#{cc.attrs.videosHandler.selVideo}" 	value="#{video}" />
								        </p:commandButton>         
									</div>
								</div>
							</h:column>				
						</h:panelGrid>
					</div>						
				</p:carousel>
		
			</h:form>
		</p:outputPanel>	
		
		<p:dialog id="dlgupload" header="#{msgs.Upload}" widgetVar="wdlgupload_#{cc.id}" modal="true" appendTo="@(body)" style="padding: 0px; margin: 0px;">
			<h:form  prependId="false" enctype="multipart/form-data">
				<p:panel style="width: 600px;height:100px">
					<p:fileUpload 
					fileUploadListener="#{cc.attrs.videosHandler.upload}" 
					mode="advanced" 
					styleClass="mobupload"
		            allowTypes="/(\.|\/)(mp4|avi|mov|webm|flv|f4v)$/"
					sizeLimit="1073741824" 
					cancelLabel="#{msgs.Cancel}"
					label="#{msgs.SelectTheVideo}"
					uploadLabel="#{msgs.Upload}"
					oncomplete="wdlgupload_#{cc.id}.hide();rcUploadYT_#{cc.id}();"
					auto="true"
					invalidFileMessage="#{msgs.InvalidVideoFormat}"
					update=":growl " /> 
					<br/>
				</p:panel>
			</h:form>
		</p:dialog>

		<p:dialog id="progressDialog" header="#{msgs.Upload}" widgetVar="wprogressDialog_#{cc.id}" onShow="pbAjax_#{cc.id}.start();" modal="true" appendTo="@(body)" closable="false" >
			<h:form prependId="false"> 
				
				<h:outputText value="#{msgs.SyncWithRemoteStorage}"/>
				<br/>
			    <p:progressBar widgetVar="pbAjax_#{cc.id}" ajax="true" value="#{cc.attrs.videosHandler.progress}"  labelTemplate="{value}%" styleClass="animated" global="false"/>
			</h:form>
		</p:dialog>

	</span>
</cc:implementation>

</html>